<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="goodsQuery.userId" placeholder="捐赠人ID"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="goodsQuery.isExhibit" clearable placeholder="审核状态">
          <el-option :value="0" label="未审核"/>
          <el-option :value="1" label="已审核"/>
          <el-option :value="2" label="未通过"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="searchList()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column
        type="index"
        label="序号"
        width="70"
        align="center">

      </el-table-column>

      <el-table-column
        prop="userId"
        label="用户ID"
        width="184"
        align="center">

      </el-table-column>

      <el-table-column
        prop="title"
        label="物品名称"
        width="100"
        align="center">

      </el-table-column>

      <el-table-column label="材料图片" align="center" prop="picture" width="300">
        <template slot-scope="scope">
          <el-image class=""
                    :src="scope.row.picture"
                    :preview-src-list="srcList" @click="preview(scope.row.picture)" width="240" height="200">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column
        prop="goodsDesc"
        label="物品描述"
        width="200"
        align="center">

      </el-table-column>

      <el-table-column
        prop="isDonation"
        label="捐/收"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isDonation===1" type="success">
            捐
          </el-tag>
          <el-tag v-if="scope.row.isDonation===0" type="warning">
            收
          </el-tag>
        </template>

      </el-table-column>

      <el-table-column
        prop="isExhibit"
        label="审核状态"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isExhibit===0" type="info">
            未审核
          </el-tag>
          <el-tag v-if="scope.row.isExhibit===1" type="success">
            已通过
          </el-tag>
          <el-tag v-if="scope.row.isExhibit===2" type="danger">
            未通过
          </el-tag>
        </template>

      </el-table-column>

      <el-table-column
        label="寄物地址"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="getAddress(scope.row.addIdFrom)">
            地址
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="gmtCreate"
        label="提交时间"
        width="160"
        align="center">
      </el-table-column>

      <el-table-column
        prop="gmtModified"
        label="更新时间"
        width="160"
        align="center">
      </el-table-column>

      <el-table-column
        label="操作"
        width="208"
        align="center">
        <template slot-scope="scope">
          <el-button type="success" size="mini" :disabled="scope.row.isExhibit>0"
                     @click="passApply(scope.row.goodsId)">
            &nbsp;&nbsp;通过&nbsp;&nbsp;
          </el-button>
          <el-button type="danger" size="mini" :disabled="scope.row.isExhibit>0"
                     @click="refuseApply(scope.row.goodsId)">
            不通过
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    地址展示表单  -->
    <el-dialog
      title="地址"
      :visible.sync="dialogTableVisible"
      width="30%">
      <el-form ref="form" :model="addressFrom" label-width="80px">

        <el-form-item label="姓名" prop="name">
          <el-input v-model="addressFrom.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addressFrom.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="addressFrom.province" disabled></el-input>
        </el-form-item>
        <el-form-item label="直辖市" prop="city">
          <el-input v-model="addressFrom.city" disabled></el-input>
        </el-form-item>
        <el-form-item label="行政区" prop="district">
          <el-input v-model="addressFrom.district" disabled></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="addressFrom.address" disabled></el-input>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />

  </div>
</template>
<script>

import apply from '@/api/wd/apply'

export default {
  data() {
    return {
      list: null,
      page: 1,//当前页
      limit: 10,//每页记录数
      total: 0,//总记录数
      srcList: [], //放大图片容器
      dialogTableVisible: false, //是否展示编辑框
      goodsQuery: {},
      addressFrom: {
        addId: "",
        name: "",
        phone: "",
        province: "",
        city: "",
        district: "",
        address: ""
      },
      goods: {
        goodsId: "",
        isExhibit: ""
      }
    };
  },
  created() { //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.page = page
      apply.getGoodsList(this.page, this.limit)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
        })
    },
    searchList(page = 1) {
      this.page = page
      apply.searchGoodsList(this.page, this.limit, this.goodsQuery)
        .then(response => {
          this.list = response.data.list
          this.total = response.data.total
        })
    },

    //图片预览
    preview(picture) {
      this.srcList = []
      this.srcList.push(picture)
    },
    resetData() {
      this.goodsQuery = {}
      this.getList()
    },
    //弹出地址框
    async getAddress(addId) {
      this.dialogTableVisible = true
      const res = await apply.getAddress(addId)
      this.addressFrom = res.data.address
      console.log(res.data.address)
    },
    //通过审核
    async passApply(goodsId) {
      this.goods = {}
      this.goods.goodsId = goodsId
      this.goods.isExhibit = "1"
      const res = await apply.passGoods(this.goods)
      if (res.code == "20000") {
        this.$message({
          type: 'success',
          message: '审核已通过!'
        });
      }
      this.getList()
    },
    //未通过审核
    async refuseApply(goodsId) {
      this.goods = {}
      this.goods.goodsId = goodsId
      this.goods.isExhibit = "2"
      const res = await apply.refuseGoods(this.goods)
      if (res.code == "20000") {
        this.$message({
          type: 'success',
          message: '审核不通过!'
        });
      }
      this.getList()
    }

  }
}
</script>
